<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情页</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<script src="js/base.js"></script>
<body>
    <div class="w">
        <div class="header">
            <div class="header-left">
                <h3>您的位置：中国 / RMB</h3>
            </div>
            <div class="header-mide">
                <a href="#">
                    <img src="img/logo.jpg" alt="杰克琼斯" />
                </a>
            </div>
            <div class="header-right">
                <h3><a href="#">登陆</a></h3>
                <h3><a href="#">购物车</a></h3>
                <div class="header-search">
                    <input type="text" value="搜素" />
                    <span><img src="img/截图 2018-06-19 16.00.01.png"/></span>
                </div>
            </div>
        </div>
        <div class="nav">
            <ul>
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">所有商品</a>
                    <div class="nav-sublist">
                        <ul class="nav-sulist-ul">
                            <li>
                                <a href="#">2018年夏季新品</a>
                                <ul>
                                    <li><a href="#">新品T恤</a></li>
                                    <li><a href="#">新品短裤</a></li>
                                    <li><a href="#">新品牛仔裤</a></li>
                                    <li><a href="#">新品休闲裤</a></li>
                                    <li><a href="#">新品西服</a></li>
                                    <li><a href="#">新品衬衫</a></li>
                                    <li><a href="#">新品防晒服</a></li>
                                    <li><a href="#">新品男鞋</a></li>
                                    <li><a href="#">新品配饰</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">内装上搭</a>
                                <ul>
                                    <li><a href="#">新潮T恤</a></li>
                                    <li><a href="#">舒适短袖衬衫</a></li>
                                    <li><a href="#">潮流卫衣</a></li>
                                    <li><a href="#">绅士衬衫</a></li>
                                    <li><a href="#">内搭针织衫</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">精选裤装</a>
                                <ul>
                                    <li><a href="#">质感牛仔裤</a></li>
                                    <li><a href="#">简约牛仔裤</a></li>
                                    <li><a href="#">凉爽短裤</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">夏季上装外套</a>
                                <ul>
                                    <li><a href="#">牛仔夹克外套</a></li>
                                    <li><a href="#">休闲西服</a></li>
                                    <li><a href="#">轻薄防晒服</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">时尚配饰</a>
                                <ul>
                                    <li><a href="#">内裤/袜子</a></li>
                                    <li><a href="#">墨镜/太阳镜</a></li>
                                    <li><a href="#">皮带</a></li>
                                    <li><a href="#">背包/提包</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">新品到店</a>
                    <div class="nav-sublist">
                        <ul class=nav-sulist-ul>
                            <li>
                                <a href="#">5月15日上新</a>
                                <ul></ul>
                            </li>
                            <li>
                                <a href="#">5月20日上新</a>
                                <ul></ul>
                            </li>
                            <li>
                                <a href="#">5月25日上新</a>
                                <ul></ul>
                            </li>
                            <li>
                                <a href="#">6月1日上新</a>
                                <ul></ul>
                            </li>
                            <li>
                                <a href="#">6月6日上新</a>
                                <ul></ul>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">专柜新品首降五折</a>
                    <div class="nav-sublist">
                        <ul class=nav-sulist-ul>
                            <li>
                                <a href="#">五折专区</a>
                                <ul></ul>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">2018Editorial</a>
                    <div class="nav-sublist">
                        <ul class=nav-sulist-ul>
                            <li>
                                <a href="#">2018Core</a>
                                <ul></ul>
                            </li>
                            <li>
                                <a href="#">2018MLMR</a>
                                <ul></ul>
                            </li>
                            <li>
                                <a href="#">2018Outwear</a>
                                <ul></ul>
                            </li>
                            <li>
                                <a href="#">2018Caps</a>
                                <ul></ul>
                            </li>
                            <li>
                                <a href="#">2018Jeans</a>
                                <ul></ul>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">产品系列</a>
                    <div class="nav-sublist">
                        <ul class=nav-sulist-ul>
                            <li>
                                <a href="#">Core系列</a>
                                <ul></ul>
                            </li>
                            <li>
                                <a href="#">Essential系列</a>
                                <ul></ul>
                            </li>
                            <li>
                                <a href="#">MLMR系列</a>
                                <ul></ul>
                            </li>
                            <li>
                                <a href="#">Jeans系列</a>
                                <ul></ul>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">2018合作系列</a>
                    <div class="nav-sublist">
                        <ul class=nav-sulist-ul>
                            <li>
                                <a href="#">2018FIFA世界杯合作系列</a>
                                <ul></ul>
                            </li>
                            <li>
                                <a href="#">2018Astrid Andersen春夏合作系列</a>
                                <ul></ul>
                            </li>
                            <li>
                                <a href="#">2018足球俱乐部合作系列</a>
                                <ul></ul>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">会员中心</a>
                </li>
            </ul>
        </div>
        <div class="status">
            首页 / 所有商品 / 春季男纯棉竖条纹胶印字母长袖衬衫衣
        </div>
        <div style="margin-top: 10px;height: 5px;background: #f2f2f2;"></div>
        <div class="detail" id="detail">
            <div class="detail-small" id="small">
                <img src="img/zimuMIn.jpg" width="313px" height="500px" />
                <div class="small-mask" id="mask"></div>
            </div>
            <div class="detail-right">
                <h3>
                    <span>春季男纯棉竖条纹胶印字母长袖衬衫衣</span>
                    <br>
                    <span></span>
                </h3>
                <p style="margin-top: 5px">产品编号：<span style="color: #999999">218131509C39</span></p>
                <p class="detail-right-pThree">
                    ￥
                    <strong>199.5</strong>
                    <span>￥</span>
                    <span>399</span>
                </p>
                <div class="detail-right-colors">
                    <p>选择颜色</p>
                    <ul>
                        <li>天蓝KENTUCKY BLUE</li>
                    </ul>
                </div>
                <div class="detail-right-chima">
                    请选择尺码
                </div>
                <div class="detail-right-btn">
                    <button style="background-color: black">加入购物车</button>
                    <button>立即购买</button>
                </div>
                <ul>
                    <li>
                        <p style="line-height: 28px;border-bottom: solid 1px #000;cursor: pointer;">
                            产品信息
                            <span class=""></span>
                        </p>
                        <div style="display: block;height: 50px">
                            面料: 棉100%,适用手洗，不可漂白，悬挂晾干，温度不高于110度熨烫，不可干洗，手洗温度不高于30度，印花部位请勿熨烫和揉搓
                        </div>
                    </li>
                </ul>
                <p style="margin-top: 15px;font-size: 18px">
                    <a href="#">联系客服</a>
                </p>
            </div>
            <div class="detail-big" id="big">
                <img src="img/zuBig.jpg" />
            </div>
        </div>
        <div class="main">
            <img style="margin-top: 10px" src="img/main1.jpg" />
            <div style="font-size:25px; line-height:25px;margin: 50px 0;">本款优势</div>
            <img src="img/mianliao.jpg" />
            <img src="img/main4.jpg">
            <img src="img/main5.jpg">
            <div class="footer">
                <div class="footer-nav">
                    <ul>
                        <li>
                            <a href="#">首页</a>
                        </li>
                        <li>
                            <a href="#">所有商品</a>
                        </li>
                        <li>
                            <a href="#">新品到店</a>
                        </li>
                        <li>
                            <a href="#">专柜新品首降五折</a>
                        </li>
                        <li>
                            <a href="#">2018Editorial</a>
                        </li>
                        <li>
                            <a href="#">产品系列</a>
                        </li>
                        <li>
                            <a href="#">2018合作系列</a>
                        </li>
                        <li>
                            <a href="#">会员中心</a>
                        </li>
                    </ul>
                </div>
                <div class="partner">
                    <img style="float: left;left: 115px" src="img/vmLogo.jpg" />
                    <img style="text-align: center;left: 50%;" src="img/onlyLogo.jpg" />
                    <img style="float: right;right: 115px" src="img/selLogo.jpg" />
                </div>
                <a href="#"><img style="display: inline-block;margin-top: 10px" src="img/besLOGO.jpg" /></a>
                <p style="text-align: center;padding: 20px">© 2013 Bestseller. All Rights Reserved 津ICP备12007886号 - 1</p>
                <p style="text-align: center;padding: 10px">绫致时装（天津）有限公司</p>
            </div>
        </div>

    </div>
</body>
</html>